<template>
  <div class="wrapper">
    <van-cell-group inset>
      <van-notice-bar color="red" background="white" left-icon="info-o">
        所带药品不能超过三种,禁药名不详，中药，保健药
      </van-notice-bar>
      <van-field
        v-model="medicinename"
        error
        required
        label="药品名称"
        placeholder="请填写药品名称"
        right-icon="arrow"
      />
      <van-field
        v-model="medicinenumber"
        error
        required
        label="药品数量"
        placeholder="请填写药品数量"
        right-icon="arrow"
      />
      <van-field
        error
        required
        label="日期"
        right-icon="arrow"
        @click="show = true"
        v-model="date"
      />
      <van-calendar v-model:show="show" @confirm="onConfirm"   color="#1989fa" />
      <van-field
        v-model="phone"
        label="注意事项"
        placeholder="请输入体重"
        right-icon="arrow"
      />
      </van-cell-group>
      <div class="twobutton">
        <van-button type="primary" @click="OnSumbit">提交</van-button>
        <van-button type="warning">取消</van-button>
      </div>
  </div>
</template>
<script lang="ts">
import { Toast } from 'vant';
import { ref } from 'vue';
export default {
  data(){
    return{
      medicinename:"",
      medicinenumber:"",
    }
  },
  methods:{
      OnSumbit(){
        Toast.success('提交成功');
      }
    },
  setup() {
    const date = ref('');
    const show = ref(false);

    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
    const onConfirm = (value) => {
      show.value = false;
      date.value = formatDate(value);
    };

    return {
      date,
      show,
      onConfirm,
    };
  },
};

</script>
<style lang="scss" scoped>
.van-button--primary{
  margin-top: 20px;
  margin-left: 20px;
  width: 130px;
}
.van-button--warning{
  margin-top: 20px;
  margin-left: 60px;
  width: 130px;
}
.van-cell{
  border: 1.2px solid #ccc;
}
.analyse{
  margin-top: 15px;
}
#myChart{
  width: 300px;
  height: 300px;
  margin-left: 40px;
}
span{
  margin-left: 15px;
  font-size: 20px;
  font-weight: bold;
}
/deep/  .van-field__control--error{
    color: #3c3c3c;
  }
</style>